$.fn.geoDialog = function($elementIdTarget, $elementValueTarget){
    var $_container = $('#container-location-select');
    var _url = $_container.attr('rel');
    var $_select = $_container.find('select');
    var $_back = $_container.find('.back');
    var $_end = $_container.find('.end');
    var Container = new Object();
    var _containerTitles = [];
    var stack = []; 
    var _titleDefault = "";
    
    $_end.attr('disabled', 'disabled')
    
    // open dialog...
    this.click(function(){
        $_container.dialog({
            modal:true,
            width: 450
        });
        if ($_select.children().size()==0){
            _addGeo(0);
        }
        // default title...
        if ($_container.dialog('option','title').length == 0){
            $_container.dialog('option','title', "Select region ...");
        }
        return false;
    });
    
    // select geo...
    $_select.click(function(){
        var select = $(this).get(0);
        var index = select.selectedIndex;
        if (index < 0){
            return;
        }
        var option = select.options[select.selectedIndex];
       
        if ($(option).hasClass('last')) {
            $_end.attr('disabled', null)
        } else {
            _containerTitles.push($(option).text());
            _showTitle();
            $_end.attr('disabled', 'disabled')
            _addGeo($(this).val());
        }
    });
    
    function _showTitle(){
        var title = _containerTitles.length==0? _titleDefault : _containerTitles.join(', ')
        $_container.dialog('option','title', title);
    }
    
    // back...
    $_back.click(function(){
        _containerTitles.pop();
        _showTitle();
        $_end.attr('disabled', 'disabled')
        stack.pop();
        _addGeo(stack.pop());        
    });
    
    // end click ...    
    $_end.click(function(){
        var select = $_select.get(0);
        var option = select.options[select.selectedIndex];
        var text = $_container.dialog('option','title') + ", " + $(option).text();
        $elementValueTarget.val(text);
        $elementIdTarget.val($_select.val());
        $elementIdTarget.change();
        $_container.dialog('close');
    })
    
    // load children geo ...
    function _addGeo(parentId){
        if (stack.length == 0){
            $_back.attr('disabled', 'disabled')
        }else{
            $_back.attr('disabled', null)
        }
        stack.push(parentId);        
        $_select.empty();
        if (Container[parentId]){
            $_select.append(Container[parentId])
            return;
        }
        
        $_select.addClass('ajax-loader');
        $.post(_url, {
            parentId: parentId, 
            format: 'html'
        }, function(data){
            $_select.append(data).removeClass('ajax-loader');
            Container[parentId]=data;
        })
        
    }
}

$.fn.geoAutocomplete = function($elementIdTarget){
    var _url = this.attr('rel');
    this.autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: _url,
                data: {
                    format: 'json',
                    name_startsWith: request.term
                },
                success: function( data ) {
                    response( $.map( data.result, function( item ) {
                        return {
                            id: item.id,
                            value: item.name
                        }
                    })
                    );
                }
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            $elementIdTarget.val(ui.item.id)
            $elementIdTarget.change();
        } 
    });
}


